<script lang="ts" setup>
  import { ref } from 'vue';
  import { Setting } from '@element-plus/icons-vue';

  defineProps({
    buttonTop: {
      type: Number,
      default: 250
    }
  });

  const show = ref(false);
</script>

<template>
  <div class="handle-button" :style="{ top: buttonTop + 'px' }" @click="show = true">
    <el-icon :size="24">
      <Setting />
    </el-icon>
  </div>
  <el-drawer v-model="show" size="300px" :with-header="false">
    <slot />
  </el-drawer>
</template>

<style lang="scss" scoped>
  .handle-button {
    position: absolute;
    right: 0;
    z-index: 10;
    display: flex;
    width: 48px;
    height: 48px;
    font-size: 24px;
    color: #fff;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    background-color: var(--g-rightpanel-button-bg-color);
    border-radius: 6px 0 0 6px !important;
    align-items: center;
    justify-content: center;
  }
</style>
